<template>
  <div id="container120" style="height: 40vh"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  props:['projectMap'],
  mounted() {
    
  },
  watch:{
    projectMap:{
      deep:true,
      immediate:true,
      handler(v){
        this.initBar(v)
      }
    }
  },
  methods: {
    initBar(row) {
      var dom = document.getElementById('container')
      var myChart = echarts.init(dom)
      console.log(row)
      const option = {
        color:["#98C63A","#5D94D9","#F4B53F","#A87FB7","#FC8B8A","#CDCDCD"],
        title: {
          text: '项目类型',
          subtext: '',
          left: 'left',
          textStyle:{//图例文字的样式
            color:'#fff',
            fontSize:16
        }
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data:row.legend,
           padding:[50, 0,0 ,20],
          textStyle:{//图例文字的样式
            color:'#fff',
            fontSize:12
        }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: row.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      if (option && typeof option === 'object') {
        myChart.setOption(option)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
</style>